.bg(@src,@imgSuffix: png,@pos: center,@size: cover){
  background: url('@{image_url}@{src}.@{imgSuffix}') no-repeat @pos;
  background-size: @size;
}

body {
  padding-top: constant(safe-area-inset-top);   //为导航栏+状态栏的高度 88px
  padding-top: env(safe-area-inset-top);   //为导航栏+状态栏的高度 88px
  padding-left: constant(safe-area-inset-left);   //如果未竖屏时为0
  padding-left: env(safe-area-inset-left);   //如果未竖屏时为0
  padding-right: constant(safe-area-inset-right); //如果未竖屏时为0
  padding-right: env(safe-area-inset-right); //如果未竖屏时为0
  //padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px
}

html,body{
  width:100%;
  height:100%;
}

.fix-bottom{
  position: fixed;
  z-index: 4;
  left: 0;
  bottom: 0;
  width: 100%;
  height: @fix-bottom-height;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  background-color: #fff;
  font-size: 12px;
  transition: all .3s;
  box-shadow: 0 2px 16px 0 rgba(108, 83, 83, 0.3);

  &.to-bottom{
    transform: translateY(100%);
  }

  &:after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -34px;
    right: 0;
    background-color: #fff;
    height: 34px;
  }
}

.page{
  &:after{
    content: '';
    flex-shrink: 0;
  }
}
.page-fix-bottom{
  &:after{
    height: @fix-bottom-height;
  }
}

@media only screen and (device-width: 375px) and (device-height: 812px) and
(-webkit-device-pixel-ratio: 3) {
  .fix-bottom{
    //constant 兼容 iOS < 11.2
    //env 兼容 iOS >= 11.2
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
    &:after{
      content: '';
      position: absolute;
      left: 0;
      bottom: -constant(safe-area-inset-bottom);
      bottom: -env(safe-area-inset-bottom);
      right: 0;
      background-color: #fff;
      height: constant(safe-area-inset-bottom);
      height: env(safe-area-inset-bottom);
    }
  }
  .page{
    &:after{
      height: constant(safe-area-inset-bottom);
      height: env(safe-area-inset-bottom);
    }
  }
  .page-fix-bottom{
    &:after{
      height: calc(constant(safe-area-inset-bottom) + @fix-bottom-height);
      height: calc(env(safe-area-inset-bottom) + @fix-bottom-height);
    }
  }
}

.mobile-hidden{
  display: none !important;
}

.mask-weixin{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  background: rgba(0, 0, 0, 0.7) url("@{image_url}/share-guide-codonate.png") no-repeat right 0.5rem/contain;
  max-width: 720px;
  margin: 0 auto;
}

.raise-summary-list{
  display: flex;
  align-items: center;
  >li{
    display: flex;
    align-items: center;
    padding: 0 .2rem;
    .raise-summary-title{
      color: @gray;
    }
    .raise-summary-desc{
      color: @red;
    }
    & + li{
      border-left: 1px solid @border;
    }
    &:first-child{
      padding-left: 0;
    }
    &:last-child{
      padding-right: 0;
    }
  }
}

.mb30{
  margin-bottom: .3rem!important;
}

.mb40{
  margin-bottom: .4rem!important;
}

.mb20{
  margin-bottom: .2rem!important;
}
